/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, {DefaultFooter} from '@ant-design/pro-layout';
import React, {PureComponent, useEffect} from 'react';
import Link from 'umi/link';
import {connect} from 'dva';
import {Button, Result, message} from 'antd';
import {formatMessage} from 'umi-plugin-react/locale';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import {getAuthorityFromRouter, isAntDesignPro} from '@/utils/utils';
import logo from '../assets/c06f4067e44445a43feb16d31ee0017.png';

const noMatch = (
    <Result
        status="403"
        title="403"
        subTitle="抱歉，您无权访问此页面。"
        extra={
            <Button type="primary">
                <Link to="/user/login">重新登录</Link>
            </Button>
        }
    />
);

/**
 * use Authorized check all menu item
 */
const menuDataRender = menuList =>
    menuList.map(item => {
        const localItem = {...item, children: item.children ? menuDataRender(item.children) : []};
        return Authorized.check(item.authority, localItem, null);
    });

const defaultFooterDom = (
    <DefaultFooter
        copyright="2020 议峰科技出品"
        links={[]}
    />
);

const footerRender = () => {
    if (!isAntDesignPro()) {
        return defaultFooterDom;
    }

    return (
        <>
            {defaultFooterDom}
            <div
                style={{
                    padding: '0px 24px 24px',
                    textAlign: 'center',
                }}
            >
                <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
                    <img
                        src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
                        width="82px"
                        alt="netlify logo"
                    />
                </a>
            </div>
        </>
    );
};

class BasicLayout extends React.PureComponent {

  state = {
    menuDataSource: []
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/fetchCurrent',
    });
    this.findSystemMenu();
  }

  findSystemMenu = () => {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'systemMenuModel/getSysMenu',
      callback: function(data){
        if(data.success){
          responseHandler(data.datas);
        }else{
          message.error("系统菜单获取失败！");
        }
      }
    });
    function responseHandler(data){
      that.setState({menuDataSource: data});
    }
  };

  render() {
    const {
      dispatch,
      children,
      settings,
      location = {
        pathname: '/',
      },
    } = this.props;
    const { menuDataSource } = this.state;

    const handleMenuCollapse = payload => {
      if (dispatch) {
        dispatch({
          type: 'global/changeLayoutCollapsed',
          payload,
        });
      }
    };
    const authorized = getAuthorityFromRouter(this.props.route.routes, location.pathname || '/') || {
      authority: undefined,
    };
    return (
      <ProLayout
        logo={logo}
        menuHeaderRender={(logoDom, titleDom) => (
          <Link to="/">
              <img alt="logo" style={{width:'35px',height:'auto'}} src={logo} />
            {titleDom}
          </Link>
        )}
        onCollapse={handleMenuCollapse}
        menuItemRender={(menuItemProps, defaultDom) => {
          if (menuItemProps.isUrl || menuItemProps.children) {
            return defaultDom;
          }

          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        breadcrumbRender={(routers = []) => [
          {
            path: '/',
            breadcrumbName: formatMessage({
              id: 'menu.home',
              defaultMessage: 'Home',
            }),
          },
          ...routers,
        ]}
        itemRender={(route, params, routes, paths) => {
          const first = routes.indexOf(route) === 0;
          return first ? (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
          ) : (
            <span>{route.breadcrumbName}</span>
          );
        }}
        footerRender={footerRender}
        // menuDataRender={menuDataRender}
        menuDataRender={() => menuDataSource}
        formatMessage={formatMessage}
        rightContentRender={rightProps => <RightContent {...rightProps} />}
        {...this.props}
        {...settings}
      >
        <Authorized authority={authorized.authority} noMatch={noMatch}>
          {children}
        </Authorized>
      </ProLayout>
    );
  }
}

export default connect(({global, settings}) => ({
    collapsed: global.collapsed,
    settings,
}))(props => <BasicLayout {...props} />);
